<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('提交訂單')}}</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="banner_box">
				<image :src="goods_info.goods_img" mode="widthFix"></image>
			</view>
			<view class="money_text">
				<view class="text">{{Lang.lang('售價')}}</view>
				<view class="num">{{goods_info.goods_price}}</view>
				<view class="type">YYDZ</view>
			</view>
			<view class="page_title">
				<view class="title">{{Lang.lang('地址信息')}}</view>
			</view>
			<view class="address" data-url="/pages/mall/address/address" @click="gotopage">
				<view class="icon icon_d iconfont icon-shouhuodizhi"></view>

				<!-- ================= -->
				<view class="text_box" v-if="address_def">
					<view class="name_box">
						<view class="name">{{address_def.consigner}}</view>
						<view class="phone">{{address_def.phone}}</view>
					</view>
					<view class="text">{{address_def.detail}}</view>
				</view>
				<view class="text_box" v-else>
					<view class="name_box">
						<view class="name"></view>
						<view class="phone"></view>
					</view>
					<view class="text">{{Lang.lang('請選擇地址')}}</view>
				</view>


				<view class="arrow iconfont icon-xiangyou1"></view>
			</view>
			<view class="page_title">
				<view class="title">{{Lang.lang('支付方式')}}</view>
			</view>

			<view class="payment_box">
				<view class="payment_list">
					<view class="icon">
						<image src="../../static/menu/menu14.png" mode="widthFix"></image>
					</view>
					<view class="title">YYDZ</view>
					<view class="tick iconfont icon-kongxinduigou"></view>
				</view>
			</view>

			<view class="confirm" @click="autoPupu()">{{Lang.lang('立即支付')}}</view>
		</view>


		<!-- 输入安全码 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">{{Lang.lang('請輸入交易密碼')}}</view>
				<view class="input">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">{{Lang.lang('取消')}}</view>
					<view class="menu" @click="shopGoodsPay">{{Lang.lang('確定')}}</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				goods_id: 0,
				goods_info: {},
				address_def: {},
				pay_password: ''

			}
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			// this.loadData();
		},
		onShow() {
			// let that = this;
			this.loadData();
		},
		methods: {
			loadData() {
				let that = this;
				that.Net._post('api/shop/shopGoodsPayInfo', {
					goods_id: that.goods_id
				}, res => {
					if (res.code == 200) {
						that.goods_info = res.data.info
						that.address_def = res.data.address_def
						//console.log(res);

					}
				});
			},
			autoPupu() {
				let that = this;
				that.pay_password = '';
				that.pupu = !that.pupu;
			},
			shopGoodsPay() {
				let that = this;
				that.Net._post('api/shop/shopGoodsPay', {
					goods_id: that.goods_id,
					pay_password: that.pay_password
				}, res => {
					if (res.code == 200) {
						that.Msg.Success(res.msg)
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/mall/order/order',
							});
						}, 500)
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.banner_box {
		width: 100%;
		text-align: center;
	}

	.banner_box image {
		width: 50%;
	}

	.money_text {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.money_text .text {
		color: #929292;
		font-size: 4vw;
		margin-right: 2vw;
		font-weight: bold;
	}

	.money_text .num {
		color: #FF2D55;
		font-size: 5vw;
		margin-right: 2vw;
		font-weight: bold;
	}

	.money_text .type {
		color: #fff;
		font-size: 4vw;
		font-weight: bold;
	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}

	.address {
		width: 100%;
		background-color: #1A1A1A;
		padding: 3vw;
		border-radius: 1.5vw;
		display: flex;
		align-items: center;
		margin-top: 3vw;
	}

	.address .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		color: #333;
		margin-right: 3vw;
		font-size: 5vw;
	}

	.icon_w {
		background-color: #2898f6;
	}

	.icon_d {
		background-color: #fff;
	}

	.address .text_box {
		flex: 1;
	}

	.address .text_box .title {
		font-size: 3.5vw;
		min-height: 10.5vw;
		color: #2898f6;
		line-height: 5vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.address .text_box .time {
		font-size: 3vw;
		color: #999;
		margin-top: 2vw;
	}

	.address .text_box .name_box {
		display: flex;
	}

	.address .text_box .name_box .name {
		font-size: 3.5vw;
		color: #ffffff;
		line-height: 6vw;
	}

	.address .text_box .name_box .phone {
		font-size: 3vw;
		color: #fff;
		line-height: 6vw;
		margin-left: 1.5vw;
	}

	.address .text_box .text {
		color: #fff;
		font-size: 3.2vw;
		line-height: 6vw;
	}

	.address .arrow {
		width: 10.5vw;
		font-size: 3.5vw;
		color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.address .menu {
		padding: 0 3vw;
		height: 6vw;
		line-height: 6vw;
		border-radius: 6vw;
		font-size: 3.2vw;
		color: #fff;
		background-color: #ff7f22;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.payment_box {
		width: 100%;
		margin-top: 3%;
	}


	.payment_box .payment_list {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #1A1A1A;
		padding: 5vw 4vw;
		border-radius: 4vw;
	}

	.payment_box .payment_list .icon {
		width: 10vw;
		margin-right: 3vw;
	}

	.payment_box .payment_list .icon image {
		width: 100%;
	}

	.payment_box .payment_list .title {
		width: 15vw;
		font-size: 3.5vw;
		color: #fff;
		flex: 1;
	}

	.payment_box .payment_list .tick {
		font-size: 6vw;
		color: #7752EC;
	}

	.confirm {
		background-color: #7752EC;
	}

	/*  */
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}

	/*  */
</style>